<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一次作业</title>
	<style>
	body{
		margin: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	    background-image: url("中国风/xuejing.jpeg");
	    background-repeat: no-repeat;
	    background-size: 100%;
	    overflow: hidden;
	    position: relative;
	    min-width: 1800px;
	}
	img{
		position: absolute;
		opacity: 0.9;
	}
		.img-1{
			width: 504px;
			height: 700px;
			top: 120px;
			right: 200px;
		}
		.img-2{
			width: 620px;
			height: 600px;
			top: 200px;
			left: 200px;
		}
		div{
			width: 100px;
			height: 100px;
			/*background-color: green;*/
			line-height: 100px;
			margin-top: 300px;
		}
		#work-box{
			width: 600px;
			height: 400px;
		
	
			z-index: 10000;
		}
		ul{
			margin-left: 15px;
		}
		ul li{
			width: 130px;
			height: 50px;
		
			float: left;
			line-height: 50px;
			text-align: center;
			list-style: none;
			
		}
		ul li:hover{
	
		}
		ul li a{
			color: #ff6700;
			font-size: 16px;
			
		}
		ul li a:hover{
			color: gold;
			box-shadow: 0px 0px 10px hotpink;
			font-size: 20px;
		}
	</style>
	</head>
	<body>
		<!--<div id="">
			<a href="千图网作业/千图网.html">千图网</a>	
		</div>
		<div id="">
			<a href="小米商城pc/xiaomishangcheng.html">小米商城</a>
		</div>
		<div id="">
			<a href="作业.html">作业断言测试</a>
		</div>-->
		<div id="work-box">
			<ul>
				<li><a href="千图网作业/千图网.html">千图网</a>	</li>
				<li><a href="小米商城pc/xiaomishangcheng.html">小米商城</a></li>
				<li><a href="作业.html">断言测试</a></li>
				<li><a href="数组去重.html">数组去重</a></li>
				<li><a href="弹窗插件.html">弹窗插件</a></li>
				<li><a href="项目一幅图/index.html">pc一图网</a></li>
				<li><a href="02钓鱼人/index.html">phone钓鱼人</a></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		
		   <!--<img class="img-1" src="中国风/gufeng1.png"/>
			<img class="img-2" src="中国风/gufeng5.png"/>-->
			<script src="jquery.js"></script>
			<script>
			
			
			function flake () {
				//创建雪花
				var img = document.createElement('img');
				//2.设置雪花的样式
				img.src = '中国风/pugongying.png';
				//先获取到浏览器可视区域宽和高
				var w = document.documentElement.clientWidth;
				var h = document.documentElement.clientHeight;
				//math对象提供了一系列的数学运算
				//max() 求最大值 ，min()，求最小值
				//round()四舍五入
				//floor()向上求整，ceil:向下求整；
				//random();求0至1之间的数，不包括一
//				Math.random()*
                var top = h* Math.random();
                var left = w* Math.random();
                img.style.position = 'absolute';
                img.style.top = top + 'px';
                img.style.right = left + 'px';
//              img.style.right = left + 'px';
                //求（20-70）随机数
                var a1 = 10 * Math.random() + 20 + 'px';
                img.style.width = a1;
                img.style.height = a1;
//              img.style.width = 55 * Math.random() + 20 + 'px'
                //3.将创建的雪花，添加到body中
                document.body.appendChild(img)
                //雪花下落
                function flakeDown () {
//              	改变雪花的top,left
                top += 1;
                left += 1;
                img.style.top = top + 'px';
                img.style.left = left + 'px';
                if (top > h) {
//              	img.style.top = '-100';
                	top = -100;
                }
                if (left > w) {
//              	img.style.left = '-100px';
                	left = -100;
                }
                 requestAnimationFrame(flakeDown);
                }
//             setInterval(flakeDown,16.7)
               requestAnimationFrame(flakeDown);
			}
			for(var i = 0; i<60; i++){
				flake()
			}
			
		</script>
	</body>
</html>